<template>
  <div id="search">
    <p class="search-t">
      <router-link to='/msite'>
        <i class="iconfont icon-arrow_lift"></i>
      </router-link>
      <input type="text" placeholder="请输入商品名称" v-model="searchTxt" @keyup.enter='setWord($event)' >
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'search',
  data: function () {
    return {
      searchTxt: ''
    }
  },
  computed: {
    ...mapState(['searchWord'])
  },
  methods: {
    ...mapMutations({
      hideTab: 'HIDETAB',
      srhTxt: 'SEARCHTXT'
    }),
    setWord (event) {
      var have = localStorage.getItem('searchWord')
      var txt = this.searchTxt
      var haveJson = JSON.parse(have)
      if (!have) {
        var arr = []
        arr.push(txt)
        localStorage.setItem('searchWord', JSON.stringify(arr))
      }
      if (have) {
        if (haveJson.indexOf(txt) === -1) {
          var haveto = JSON.parse(have)
          haveto.unshift(txt)
          localStorage.setItem('searchWord', JSON.stringify(haveto))
        } else {
          var arr1 = haveJson.filter(function (value) {
            return value !== txt
          })
          arr1.unshift(txt)
          localStorage.removeItem('searchWord')
          localStorage.setItem('searchWord', JSON.stringify(arr1))
        }
      }
      location.href = 'http://localhost:8080/#/search/searchList?keyWord=' + txt
      this.srhTxt(txt)
    }
  },
  mounted: function () {
    this.hideTab()
  }
}
</script>

<style scoped lang='scss'>
  @import '../../static/hotcss/px2rem.scss';
  #search{
    width: 100%;
    height: 100%;
    background: #fff;
    padding: px2rem(22) 0;
      .search-t{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px2rem(22);
        padding: px2rem(22);
        position: fixed;
        left: 0;
        top: px2rem(0);
        background: #fff;
        z-index: 100;
        input{
          width: 90%;
          margin: 0 px2rem(20);
          height: px2rem(70);
          background: #f8f8f8;
          font-size: px2rem(30);
          border: none;
          border-radius:px2rem(20);
          outline: none;
          padding: 0 px2rem(20);
        }
        a{
          text-decoration: none;
          display: flex;
          justify-content: center;
          align-items: center;
          i{
            font-size: px2rem(30);
            color: #333;
          }
        }
      }


  }

</style>


